<template>
    <van-nav-bar class="myhead" :title="title" fixed  >
      <template #right>
        <van-popover  
            placement="bottom-end" 
            v-model="showPopover" 
            trigger="click" 
            :actions="actions"
            @select="clickToSelect"
          >
          <template #reference>
             <van-icon name="ellipsis" size="60" />
          </template>
        </van-popover>
      </template>
      <template #left v-if="back">
        <div @click="gotoback" class="back">
            <van-icon name="arrow-left"  size="60"  />
            <span :style="{color:'#1989fa'}">返回</span>
        </div>
      </template>
    </van-nav-bar>

</template>

<script>
export default {
  data(){
    return {
      showPopover:false,
      actions:[
        { text: '搜索', icon: 'search',index:0, value:"search",disabled:this.search},
        { text: '登录', icon: 'user-o',index:1, value:"login",disabled:this.login },
        { text: '扫码', icon: 'scan',index:2, value:"scan" },
        { text: '注销', icon: 'replay',index:3, value:"logout" },
      ]
    }
  },
  methods:{
    clickToSelect(action){
      console.log(action)
      if(action.value=='search'){
        this.gotowhere("search");
      }else if(action.value=='login'){
         this.gotowhere("login");
      }else if(action.value=='logout'){
        console.log("replay")
        this.changeUserInfo(null);
      }
    },
    gotoback(){
      this.$router.go(-1)
    }
  },
  props:{
    title:{
      type:String,
    },
    search:{
      type:Boolean,
    },
    login:{
      type:Boolean,
    },
    back:{
      type:Boolean,
      default:false,
    }
  },
}
</script>

<style lang="scss" scoped>
.back{
  display: flex;
  justify-content: center;
  align-items: center;
}
.myhead{
  z-index:1000;
}
</style>
